<template>
  <view class="details-container">
    <forumCard :conmment="true" :forumDetail="forumDetail" @open="open">
      <template #default>
        <view class="line"></view>
        <!-- 展示评论 -->
        <view class="comment-area" v-if="commentList + ''">
          <view class="area-title">评论区</view>
          <!-- 评论列表 -->
          <view class="area-list" v-if="commentList">
            <!-- 评论 -->
            <view class="area-item" v-for="(item, index) in commentList" :key="item.id">
              <!-- 内容 -->
              <view class="item-content">{{ item.message }}</view>
              <!-- 头像- 名字- 时间 赞 -->
              <view class="item-info">
                <view class="item-avatar">
                  <image src="../static/boy.png" v-if="!item.userInfo.avatar"></image>
                  <image :src='item.userInfo.avatar' v-else></image>
                </view>
                <view class="item-name">{{ item.userInfo.name }}</view>
                <view class="item-time">{{ item.createTime }}</view>
                <view class="item-like" @click="getLike(index)">
                  <uni-icons :type="item.heart" :class="{ 'heart-filled': item.heart === 'heart-filled' }"></uni-icons>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 无评论 -->
        <view class="empty" v-else>
          <p>暂时无评论哦,来抢占一楼沙发吧！</p>
        </view>
      </template>
    </forumCard>
    <!-- 评论框 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content">
        <uni-easyinput type="textarea" v-model="commentContent" placeholder="请输入评论内容"></uni-easyinput>
        <button class="comment-btn" @click="postComment">发表评论</button>
      </view>
    </uni-popup>
    <!-- 提示框 -->
    <uni-popup ref="message" type="message">
      <uni-popup-message :type="msgType" :message="tips" :duration="2000"></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script>
import forumCard from './components/forum-card.vue';
import { mapState } from 'vuex'
import {
  getForumListAsync,
  getForumAsync,
  getCommentListAsync,
  postCommentAsync,
  getUserInfoAsync
} from '@/api/forum.js'

export default {
  components: {
    forumCard
  },
  data () {
    return {
      // 帖子详情
      forumDetail: {},
      // 帖子id
      id: '',
      // 帖子用户id
      userId: '',
      // 评论列表
      commentList: [],
      // 评论内容
      commentContent: '',
      msgType: '',
      tips: ''

    };
  },
  onLoad (options) {
    this.id = Number(options.id)
    this.userId = Number(options.userId)
    this.getForum(this.id)
    this.getCommentList()

  },
  methods: {
    // 获取指定帖子
    async getForum (userId) {
      try {
        const res = await getForumAsync(userId)
        this.forumDetail = res.data.data
        getUserInfoAsync(this.forumDetail.userId).then(res => {
          this.forumDetail.userInfo = res.data.data
          let date = this.forumDetail.createTime.split('T')[0]
          let time = this.forumDetail.createTime.split('T')[1]
          this.forumDetail.createTime = date.substring(5) + '  ' + time.substring(0, 5)
          this.$forceUpdate()
        })
        console.log('%c [  ]-66', 'font-size:13px; background:pink; color:#bf2c9f;', res)
      } catch (error) {
        console.log('%c [  ]-69', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }
    },
    // 获取评论列表
    async getCommentList () {
      try {
        const params = {
          'forumId': this.id
        }
        const res = await getCommentListAsync(params)
        this.commentList = res.data.data
        this.commentList = this.commentList.map(item => {
          let date = item.createTime.split('T')[0]
          let time = item.createTime.split('T')[1]
          item.createTime = date.substring(5) + '  ' + time.substring(0, 5)
          item.heart = 'heart'
          if (item.userId) {
            getUserInfoAsync(item.userId).then(res => {
              item.userInfo = res.data.data
              this.$forceUpdate()
            })
          } else {
            item.userInfo = {}
          }
          return item
        })

        console.log('%c [  ]-127', 'font-size:13px; background:pink; color:#bf2c9f;', this.commentList)
      } catch (error) {
        console.log('%c [  ]-85', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }

    },
    // 打开评论框
    open () {
      this.$refs.popup.open('top')
    },
    //发布评论
    async postComment () {
      try {
        const userId = Number(this.userInfo.id)
        console.log('%c [  ]-128', 'font-size:13px; background:pink; color:#bf2c9f;', userId)
        if (this.commentContent.trim()) {
          await postCommentAsync({
            "userId": userId,
            "forumId": this.id,
            "message": this.commentContent
          })
          this.$refs.popup.close()
          let createTime = new Date().toISOString()
          let date = createTime.split('T')[0]
          let time = createTime.split('T')[1]
          createTime = date.substring(5) + '  ' + time.substring(0, 5)
          this.commentList.unshift({
            createTime,
            "forumId": this.id,
            "message": this.commentContent,
            'userInfo': this.userInfo,
            'heart': 'heart'
          })
          uni.$emit('forum', { data: 2 });
          return this.messageToggle('success', '成功发表评论！')
        } else {
          this.$refs.popup.close()
          return this.messageToggle('error', '发表失败，请输入评论内容！')

        }

      } catch (error) {
        console.log('%c [  ]-124', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }

    },
    // 封装提示框
    messageToggle (type, tips) {
      this.msgType = type
      this.tips = tips
      this.$refs.message.open()
    },
    // 点击爱心
    getLike (index) {
      this.commentList[index].heart = this.commentList[index].heart === 'heart' ? 'heart-filled' : 'heart'
      this.$forceUpdate()
    }


  },
  computed: {
    ...mapState('user', ['userInfo'])
  }

};
</script>

<style lang="scss">
.details-container {
  background-color: #fff;
  width: 100%;
  margin: 0 auto;
  padding: 20rpx 0;
  height: 100vh;
  box-sizing: border-box;

  .forum-card {
    box-shadow: none;
  }

  .line {
    margin: 0 auto;
    padding: 10rpx 0;
    width: 90%;
    border-bottom: 1rpx solid lightgray;
  }

  .comment-area {
    .area-title {
      padding: 20rpx 0;
      color: #0055ff;
      font-weight: 700;
      font-size: 32rpx;
    }

    .area-list {
      .area-item {
        padding: 20rpx 20rpx;

        &:not(:last-child) {
          border-bottom: 1rpx solid lightgray;

        }

        .item-content {
          // display: block;
          text-indent: 20rpx;
          padding: 10rpx 0;
          font-size: 28rpx;
        }

        .item-info {
          display: flex;
          align-items: center;
          gap: 20rpx;
          font-size: 24rpx;

          .item-avatar {
            width: 60rpx;
            height: 60rpx;

            image {
              clip-path: circle(50% at center);
              width: 100%;
              height: 100%;
            }
          }

          .item-name {
            color: #0055ff;
            font-size: 28rpx;
          }

          .item-time {
            color: darkgray;
          }

          .item-like {
            margin-left: auto;
          }
        }
      }
    }
  }

  .popup-content {
    padding: 10rpx 20rpx;

    .comment-btn {
      text-align: center;
      background-color: skyblue;
      color: #fff;
      font-size: 32rpx;
    }
  }
}

.heart-filled {
  .uniui-heart-filled {
    color: #ff7a7a !important;
  }
}


.empty {
  height: 200px;
  line-height: 200px;
  text-align: center;

  p {
    font-size: 40rpx;
    font-style: italic;
    font-weight: 700;

    color: #eee;
  }
}
</style>
